<!-- 回款管理-基础设置-账号设置-新建收款账户组件 -->
<template>
  <a-modal
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
  >
    <template #title> 添加账户信息 </template>
    <div class="add-account-content">
      <div class="tips"> tips：如需跨行转账，请维护好银行卡分支信息。 </div>
      <a-form
        auto-label-width
        :model="form"
        :rules="rules"
        direction="vertical"
      >
        <a-form-item field="type" label="账户类型：">
          <a-radio-group v-model="form.accountType">
            <a-radio value="1">对公账户</a-radio>
            <a-radio value="2">对私账户</a-radio>
            <a-radio value="3">支付宝</a-radio>
            <a-radio value="4">微信</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="accountName" label="户名：">
          <a-input
            placeholder="请输入账户名称"
            allow-clear
            v-model="form.name"
          ></a-input>
        </a-form-item>
        <a-form-item field="accountNumber" label="账号：">
          <a-input
            placeholder="请输入账户"
            allow-clear
            v-model="form.account"
          ></a-input>
        </a-form-item>

        <!-- 对公账户和对私账户的form表单 -->
        <div v-if="form.accountType === '1' || form.accountType === '2'">
          <a-form-item field="decision" label="开户银行：">
            <a-input
              placeholder="请填写开户银行"
              allow-clear
              v-model="form.bankOfDeposit"
            ></a-input>
          </a-form-item>
          <a-form-item field="accountCity" label="开户省市：">
            <a-input
              placeholder="请填写开户省市"
              allow-clear
              v-model="form.bankOfProvince"
            ></a-input>
          </a-form-item>
          <a-form-item field="accountBranch" label="分支行：">
            <a-input
              placeholder="请填写分支行"
              allow-clear
              v-model="form.bankOfBranches"
            ></a-input>
          </a-form-item>
        </div>
        <a-form-item field="remark" label="备注：">
          <a-textarea
            placeholder="备注该账户，以示区分"
            v-model="form.remark"
            allow-clear
            show-word-limit
            :auto-size="{
              minRows: 3,
            }"
          />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect } from 'vue';
  // import { IClientAddFollowRecord } from '@/types/order';

  const props = withDefaults(
    defineProps<{
      visible: boolean; // 是否显示对话框
    }>(),
    {
      visible: false,
    }
  );

  const emit = defineEmits(['update:visible', 'addAccountEmit']);

  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  let form = ref<any>({
    accountType: '1',
  });

  const rules = reactive({});

  // 保存
  const handleOk = async () => {
    modalVisible.value = false;
    form.value.accountType = Number(form.value.accountType);

    switch (form.value.type) {
      case 1:
        form.value.typeName = '对公账户';
        break;
      case 2:
        form.value.typeName = '对私账户';
        break;
      case 3:
        form.value.typeName = '支付宝';
        break;
      case 4:
        form.value.typeName = '微信';
        break;
      default:
        break;
    }
    emit('addAccountEmit', form.value);
    form.value = {
      accountType: '1',
    };
  };

  // 取消
  const handleCancel = () => {
    form.value = {
      accountType: '1',
    };
    modalVisible.value = false;
  };
</script>

<style scoped lang="less">
  .add-account-content {
    .tips {
      height: 40px;
      line-height: 20px;
      color: red;
      position: relative;
      left: 12px;
    }
  }
</style>
